<div>
  <div class="btn-group">
    <div class="btn-group" data-ng-show="thesaurus.length > 0">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-book"/>&nbsp;
        <span data-ng-hide="!allowFreeTextKeywords || selectorOnly"
              data-translate="">addFromThesaurus</span>
        <span class="caret"/>
      </button>
      <ul class="dropdown-menu">
        <li data-ng-repeat="t in thesaurus | orderBy:'props.title'"
            data-ng-show="t.get().activated == 'y'"
            data-ng-class="t.getKey() == thesaurusKey ? 'disabled' : ''">
          <a href=""
             data-ng-click="addThesaurus(t.getKey())">
            {{t.getTitle()}}
            <span data-ng-show="t.getKey() == thesaurusKey">
                  (<span data-translate="">current</span>)
              </span>
          </a>
        </li>
      </ul>
    </div>
    <button class="btn btn-default" type="button"
            data-gn-click-and-spin="add()"
            title="{{'addKeywordNotFromThesaurusHelp' | translate}}"
            data-ng-if="allowFreeTextKeywords && !selectorOnly">
      <i class="fa fa-plus gn-add"/>&nbsp;
      <span data-translate="">addKeywordNotFromThesaurus</span>
    </button>
  </div>
  <!-- The thesaurus snippet to insert once received -->
  <div data-ng-if="snippet && !selectorOnly">
    <input name="{{snippetRef}}" type="hidden" value="{{snippet}}"/>
  </div>
</div>
